<template>
    <div>
        <div slot="tip" class="panel panel-default panel-search">
            <el-form :inline="true" label-width="68px">
                <el-row>
                    <el-form-item label="周期" prop="periodSelect">
                        <period-select
                            :fnChange="buildDataRanges"
                            ref="periodSelect"
                            v-model="page.query.param.periodId"
                            :clearable="true"
                        ></period-select>
                    </el-form-item>

                    <el-form-item label="日期">
                        <el-date-picker
                            style="width: 280px"
                            v-model="dateRange"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy年MM月dd日"
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="班次" prop="classMasterId">
                        <class-master-select :fnChange="search"
                                             v-model="page.query.param.classMasterId" :clearable="true">
                        </class-master-select>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-select :clearable="true" v-model="page.query.param.classType" style="width:120px">
                            <el-option v-for="item in $dongxwDict.store.CLASS_TYPES"
                                       :key="item[0]" :value="item[0]" :label="item[1]">

                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="部门" prop="departmentId">
                        <department-select
                            :fnChange="search"
                            v-model="page.query.param.departmentId"
                            :clearable="true"></department-select>
                    </el-form-item>
                    <el-form-item label="小组" prop="departmentId">
                        <department-select
                            :fnChange="search"
                            v-model="page.query.param.departmentId"
                            :clearable="true"
                        ></department-select>
                    </el-form-item>
                    <el-form-item label="员工" prop="employeeId">
                        <employee-select
                            :fnChange="search"
                            v-model="page.query.param.employeeId"
                            :departmentId="page.query.param.departmentId"
                            :clearable="true">
                        </employee-select>

                        <el-button type="primary" style="margin-left:-2px" plain @click="findEmployee">
                            选择员工
                        </el-button>
                    </el-form-item>
                    <el-form-item label="出勤类型">
                        <el-select :clearable="true" v-model="page.query.param.subclassType"
                                   style="width:120px">
                            <el-option v-for="item in $dongxwDict.store.SUBCLASS_TYPES"
                                       :key="item[0]" :value="item[0]" :label="item[1]">

                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search" v-keycode="'ENTER'">查询
                        </el-button>
                        <el-button @click="cancel">取消</el-button>
                        <el-button type="primary" style="margin-left:15px" plain @click="createMake">排班</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
        <!--<v-toolbar type="alert" style="margin-left:-5px">-->
        <!--&lt;!&ndash;<el-button slot='tip' type="primary" plain @click="create">新增</el-button>&ndash;&gt;-->
        <!--<el-button slot='tip' type="primary" plain @click="createMake">排班</el-button>-->
        <!--&lt;!&ndash;<el-button plain @click="exportRecords">导出 XLS</el-button>&ndash;&gt;-->
        <!--&lt;!&ndash;<el-button type="primary" plain @click="create">新增</el-button>&ndash;&gt;-->
        <!--</v-toolbar>-->
        <div width="50%">
            <!--:click="clickRow"-->

            <v-table
                ref="table"
                :dblclick="edit"
                :page="page"
                :table-minheight="450"
                @dataloaded="onDataloaded"
            >
                <!--<el-table-column prop='departmentId' :sortable='true' label='部门标识' width='80'>-->
                <!--<template slot-scope='{row}'><span style='color:black'>-->
                <!--{{row.departmentId}}</span>-->
                <!--</template>-->
                <!--</el-table-column>-->
                <el-table-column
                    prop="department"
                    :sortable="true"
                    label="部门"
                    width="160"
                >
                    <template slot-scope="{ row }">
                        <span style="color: black">{{ row.employee.department.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="workID" :sortable="true" label="工号" width="80">
                    <template slot-scope="{ row }">
            <span style="color: black">{{
                    (row.employee || {id: "-"}).workID
                }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="employee"
                    :sortable="true"
                    label="员工"
                    width="100"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">{{
                    (row.employee || {name: "-"}).name
                }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="workday"
                    :sortable="true"
                    label="日期"
                    width="120">
                    <template slot-scope="{ row }">
                        <!--<span style='color:black'>  {{ $dongxwDict.viewDate(row.workday)+" "+row.week}} </span>-->
                        <el-button type="text" @click="edit(row)" plain>{{
                                $dongxwDict.viewDate(row.workday) + " " + row.week
                            }}
                        </el-button>
                    </template>
                </el-table-column>

                <el-table-column prop="segment" label="段落" width="55">
                    <template slot-scope="{ row }">
                        <span style="color: black"> {{ row.segment }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="class" :sortable="true" label="班次" width="100">
                    <template slot-scope="{ row }">
                        {{ (row.classMaster || {}).name }}
                    </template>
                </el-table-column>
                <el-table-column prop="classType" label="班次类型" width="80">
                    <template slot-scope="{ row }">
                        {{ DICT.CLASSTYPE[row.classType] }}
                    </template>
                </el-table-column>
                <el-table-column prop="subclassType" label="出勤类型" width="80">
                    <template slot-scope="{ row }">
                        {{ DICT.CLASSSUBTYPE[row.subclassType] }}
                    </template>
                </el-table-column>
                <el-table-column prop="sStart" label="上班卡" width="80">
                    <template slot-scope="{ row }">
            <span :style="row.sStartNo ? 'color:green' : 'color:black'">
              {{ row.sStart + " " + (row.sStartNo ? "免" : "") }}
            </span>
                    </template>
                </el-table-column>

                <el-table-column prop="sEndNo" label="下班卡" width="80">
                    <template slot-scope="{ row }">
            <span :style="row.sEndNo ? 'color:green' : 'color:black'">
              {{ row.sEnd + " " + (row.sEndNo ? "免" : "") }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column prop="overDay" label="跨天" width="50">
                    <template slot-scope="{ row }">
            <span :style="row.overDay ? 'color:red' : 'color:black'">
              {{ row.overDay ? "是" : "" }}
            </span>
                    </template>
                </el-table-column>

                <el-table-column prop="sStartB" label="上班前后分钟" width="110">
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.sStartB + "--》" + row.sStartA }}</span
            >
                    </template>
                </el-table-column>
                <el-table-column prop="sEndB" label="下班前后分钟" width="110">
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.sEndB + "--》" + row.sEndA }}</span
            >
                    </template>
                </el-table-column>

                <el-table-column prop="hStandard" label="标准工时" width="70">
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.hStandard }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column prop="hMinus" label="扣除工时" width="70">
                    <template slot-scope="{ row }"
                    ><span style="color: black"> {{ row.hMinus }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="hOvertime" label="加班工时" width="70">
                    <template slot-scope="{ row }">
            <span :style="row.includeOvertime ? 'color:red' : 'color:black'">
              {{ row.includeOvertime ? row.hOvertime : "" }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column prop="createdBy" label="创建人">
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.userName }}
                <!-- {{ $dongxwDict.viewDate(row.createdAt) }} -->
            </span>
                    </template>
                </el-table-column>
                <!--<el-table-column prop='createdBy' :sortable='true' label='创建人' width='80'>-->
                <!--<template slot-scope='{row}'><span style='color:black'>-->
                <!--{{row.createdBy}}</span>-->
                <!--</template>-->
                <!--</el-table-column>-->
                <el-table-column width="80" label="操作" :fixed="'right'">
                    <template slot-scope="scope">
                        <el-button type="text" title="编辑" @click="edit(scope.row)">
                            <i class="el-icon-edit"></i>
                        </el-button>
                        <el-button
                            type="text"
                            @click="del(scope.row, scope.$index)"
                            title="删除"
                        >
              <span style="color: red">
                <i class="el-icon-delete red"></i
                ></span>
                        </el-button>
                    </template>
                </el-table-column>
            </v-table>
        </div>
        <v-dialog ref="formDiag" :width="'32%'" title="信息编辑">
            <form-panel @saved="onFormSaved"></form-panel>
            <div slot="footer">
                <el-button type="primary" @click="$refs.formDiag.dispatch('submit')"
                >保存
                </el-button
                >
                <el-button
                    type="default"
                    @click="
            () => {
              $refs.formDiag.hide();
            }
          "
                >取消
                </el-button
                >
            </div>
        </v-dialog>
        <v-dialog
            ref="formFindDiag"
            :appendToBody="true"
            title="查找"
            :width="'48%'"
        >
            <employee-multi-select
                v-model="page.query.param.employeeId"
                :confirmFind="confirmFind"
                :cancelFind="cancelFind"
            >
                <!--<el-button type="primary" @click="$refs.formDiag.dispatch('submit')">确定</el-button>-->
                <!--<el-button type="default" @click="()=>{$refs.formDiag.hide();}">取消</el-button>-->
            </employee-multi-select>
        </v-dialog>
        <v-dialog ref="formMakeDiag" :width="'720px'" title="排班">
            <make-form-panel @saved="onMakeFormSaved"></make-form-panel>
            <div slot="footer" style="margin-right: 90px">
                <el-button type="primary" @click="$refs.formMakeDiag.dispatch('submit')"
                >排 班
                </el-button
                >
                <el-button
                    type="default"
                    @click="
            () => {
              $refs.formMakeDiag.hide();
              $nextTick(search);
            }
          "
                >关闭
                </el-button
                >
            </div>
        </v-dialog>
    </div>
</template>
<style rel="stylesheet/less" scoped lang="less">
.status_green {
    color: green;
}
</style>

<script>
import DepartmentSelect from '@/components/widgets/hr/DepartmentSelect.vue';
import EmployeeSelect from '@/components/widgets/hr/EmployeeSelect.vue';

import ClassMasterSelect from '@/components/widgets/attend/ClassMasterSelect.vue';
import PeriodSelect from '@/components/widgets/attend/PeriodSelect.vue';
import EmployeeMultiSelect from '@/components/widgets/hr/EmployeeMultiSelect.vue'

import FormPanel from './Form'
import MakeFormPanel from './MakeForm';

export default {
    components: {
        EmployeeMultiSelect,
        ClassMasterSelect,
        PeriodSelect,
        FormPanel,
        MakeFormPanel,
        EmployeeSelect,
        DepartmentSelect
    },
    props: {
        fatherMethodShowSub: {
            type: Function,
            default: null,
        }
    },
    data() {
        return {
            DICT: {
                CLASSTYPE: {
                    10: '10--正常班',
                    20: '20--加班',
                    30: '30--休班'
                },
                CLASSSUBTYPE: {
                    10: "10--正常班",
                    20: "20--自动算",
                    21: "21--平时加班",
                    22: "22--周末加班",
                    23: "23--节日加班",
                    30: "30--出差",
                    31: "31--请假",
                    32: "32--调休",
                    33: "33--年假",
                    34: "34--事假",
                    35: "35--病假",
                },
            },
            dateRange: [],
            formStatus: 1,
            summaryMap: {},
            page: {
                query: {
                    orderBys: "departmentId|asc,employeeId|asc,workday|desc",

                    param: {
                        name: "",
                        departmentId: null,
                        employeeId: null,
                        periodId: null,
                        period: {},
                        isDeleted: false,
                    },
                },
                getData: this.$api.attend.attend.EmployeeClassService.query,
            },
            tableActions: [
                {
                    name: "编辑",
                    handle: this.edit,
                },
                {
                    name: "删除",
                    handle: this.del,
                    style: "color:red",
                },
            ],
        };
    },
    computed: {},

    methods: {
        findEmployee() {
            this.$refs.formFindDiag.show();
        },

        confirmFind(row) {
            this.$refs.formFindDiag.hide();
            this.page.query.param.employeeId = row.id;
            this.page.query.param.departmentId = null;

            this.search();
        },
        cancelFind() {
            this.$refs.formFindDiag.hide();
        },

        onDataloaded(rsp) {
        },
        /*
                导出
                 */
        exportRecords() {
            let params = _.cloneDeep(this.getSearchParams());
            params.param.parentId = null;
            this.$api.attend.attend.EmployeeClassService.export(params);
        },

        create() {
            this.$refs.formDiag.show();
        },
        createMake() {
            this.$refs.formMakeDiag.show({
                departmentId: this.page.query.param.departmentId,
            });
        },
        edit(row) {
            this.$refs.formDiag.show({employeeClassId: row.employeeClassId});
        },

        del(row) {
            this.$confirm("确定删除此记录吗?", "提示", {
                type: "warning",
            }).then(() => {
                this.$api.attend.attend.EmployeeClassService.deleteById(
                    row.employeeClassId
                ).then((rsp) => {
                    this.search();
                    this.$msgJsonResult(rsp);
                });
            });
        },

        onMakeFormSaved() {
            this.$refs.formMakeDiag.hide();
            this.$nextTick(this.search);
        },

        onFormSaved() {
            this.$refs.formDiag.hide();
            this.$nextTick(this.search);
        },
        init(options = {}) {
            if (options.employeeClassId) {
                this.employeeClassId = options.employeeClassId;
            }
            this.search();
        },
        getSearchParams() {
            this.page.query.dateRanges = {};
            if (this.dateRange && this.dateRange.length > 0) {
                this.page.query.dateRanges["workday"] = {
                    startDate: this.dateRange[0],
                    endDate: this.dateRange.length > 1 ? this.dateRange[1] : null,
                };
            }
            return this.page.query;
        },

        buildDataRanges() {
            if (this.page.query.param.periodId != null) {
                this.$api.attend.attend.PeriodService.findById(
                    this.page.query.param.periodId
                ).then((r) => {
                    //console.log(JSON.stringify(r));
                    if (r.data != null) {
                        this.dateRange = [r.data.startDay, r.data.endDay];
                        this.getSearchParams();
                        //  console.log(JSON.stringify(this.page.query));
                        this.$refs.table.load();
                        return;
                    }
                });
            }
        },
        search() {
            this.getSearchParams();
            console.log(JSON.stringify(this.page.query));
            this.$refs.table.load();
            //this.$refs.tablesub.load();
        },
        cancel() {
            this.dateRange = [];

            this.page.query.param = {
                isDeleted: false,
            };
            this.search();
        },

        clickRow(row) {
            this.row = row;
            // console.log(JSON.stringify(row));
            if (this.fatherMethodShowSub) {
                this.fatherMethodShowSub(row);
            }
        },
    },

    created() {
    },
    mounted() {
        this.$on("init", this.init);
    },
};
</script>
